<template>
    <!-- 汇总统计 -->
    <div class="collect-echart bj-flex-between">
        <div class="collect-item bj-column-center">
            <div class="decoration2">
                <dv-decoration-2 :color="['#2376C4', '#7ED0F5']" style="width:192px;height:6px;" />
            </div>
            
            <div class="collect-title">
                总开发量(家)
            </div>
            <div class="collect-number">
                <countTo :startVal="0" :endVal="852" :duration="1000" :decimals="0"></countTo>
            </div>
        </div>
        <div class="collect-item bj-column-center">
            <div class="decoration2">
                <dv-decoration-2 :color="['#2376C4', '#7ED0F5']" style="width:192px;height:6px;" />
            </div>
            <div class="collect-title">
                入驻前数量(家)
            </div>
            <div class="collect-number">
                <countTo :startVal="0" :endVal="311" :duration="2000" :decimals="0"></countTo>
            </div>
        </div>
        <div class="collect-item bj-column-center">
            <div class="decoration2">
                <dv-decoration-2 :color="['#2376C4', '#7ED0F5']" style="width:192px;height:6px;" />
            </div>
            <div class="collect-title">
                入驻中数量(家)
            </div>
            <div class="collect-number">
                <countTo :startVal="0" :endVal="622" :duration="2000" :decimals="0"></countTo>
            </div>
        </div>
        <div class="collect-item bj-column-center">
            <div class="decoration2">
                <dv-decoration-2 :color="['#2376C4', '#7ED0F5']" style="width:192px;height:6px;" />
            </div>
            <div class="collect-title">
                入驻后数量(家)
            </div>
            <div class="collect-number">
                <countTo :startVal="0" :endVal="521" :duration="2000" :decimals="0"></countTo>
            </div>
        </div>
    </div>
</template>

<script>
import countTo from 'vue-count-to';
export default {
    props:{
        
    },
    components: {
        countTo
    }
};
</script>

<style lang="scss" class>
.collect-echart{
    width: 100%;
    position: absolute;
    padding: 0px 12px;
    height: 104px;
    z-index: 99;
    .collect-item{
        position: relative;
        width: 220px;
        height: 104px;
        background: url("../../assets/collect-bg.png") center no-repeat;
        background-size: 100% 100%;
    }
    .decoration2{
        position: absolute;
        top: -1px;
        left: 0rem;
    }
    .collect-title{
        font-size: 14px;
        color: #FFFFFF;
    }
    .collect-number{
        padding-top: 8px;
        font-weight: bold;
        font-size: 32px;
    }
}
</style>